import React, {PureComponent} from 'react';
import {
	Image,
	StyleSheet,
	Text,
	View,
	TouchableOpacity,
	Switch
} from 'react-native';
import PropTypes from 'prop-types';

/**
 * @FileName: CommonCell
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description: 设置条组件
 */
class CommonCell extends PureComponent {
	static propTypes = {
		// 标题内容
		title: PropTypes.string.isRequired,
		// 是否有开关
		isSwitch: PropTypes.bool,
		// 右侧标题
		rightTitle: PropTypes.string
	};
	/**
	 * 默认配置
	 */
	static defaultProps = {
		// 标题
		title: '',
		// 是否展示开关
		isSwitch: false,
		// 右侧标题
		rightTitle: ''
	};
	
	constructor(props) {
		super(props);
		// 是否有开关初始值
		this.state = {
			isOn: false
		}
	}
	
	render() {
		return (
			<TouchableOpacity
				activeOpacity={0.5}
				onPress={() => {
					alert('点击')
				}}
			>
				<View style={styles.container}>
					{/*左边*/}
					<Text style={{fontWeight: 'bold', fontSize: 18, marginLeft: 8}}>{this.props.title}</Text>
					{/*右边*/}
					{this.renderRightView()}
				</View>
			</TouchableOpacity>
		)
	}
	
	/**
	 * 渲染右边显示的内容
	 */
	renderRightView() {
		// 判断
		if (this.props.isSwitch) {
			// 开关
			return (
				<Switch
					value={this.state.isOn === true}
					style={{marginRight: 8}}
					onValueChange={() => {
						this.setState({
							isOn: !this.state.isOn
						})
					}}
				/>
			)
		} else {
			return (
				<View style={{flexDirection: 'row', alignItems:'center'}}>
					{this.renderRightTitle()}
					{/*箭头*/}
					<Image style={{width: 16, height: 16, marginRight: 8}} source={{uri: 'icon_cell_right_arrow'}}/>
				</View>
			)
		}
	}
	
	/**
	 * 渲染右侧标题
	 */
	renderRightTitle() {
		if (this.props.rightTitle.length > 0) {
			return(
				<Text style={{color:'gray',marginRight:3}}>{this.props.rightTitle}</Text>
			)
		}
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white',
		height: 50,
		borderBottomColor: '#dddddd',
		borderBottomWidth: 0.5,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	}
});

/**
 * 导出当前Module
 */
module.exports = CommonCell;